<template>
  <div class="picker-user">
    <Modal
      title="客户列表"
      v-model="pickerUser.show"
      width="1300px"
      @on-ok="ok"
      @on-cancel="cancel"
      scrollable
      :z-index="2000" style="min-width: 1000px;max-width: 1200px;">
      <!-- <query @query="formQuery" @reset="formReset" style="padding-bottom: 20px">
        <div slot="col-form"> -->
          <Form :model="userDetailQuery" :label-width="160">
            <Row>
              <Col :span="7">
                <FormItem label="服务单位" style="margin-bottom:20px" prop="custNo">
                  <Input type="text" v-model="userDetailQuery.orgNo" placeholder="请输入..."></Input>
                </FormItem>
              </Col>
              <Col :span="7">
                <FormItem label="客户编号" style="margin-bottom:20px" prop="custNo">
                  <Input type="text" v-model="userDetailQuery.custNo" placeholder="请输入..."></Input>
                </FormItem>
              </Col>
              <Col :span="7">
                <FormItem label="客户名称" style="margin-bottom:20px" prop="custName">
                  <Input type="text" v-model="userDetailQuery.custName" placeholder="请输入..."></Input>
                </FormItem>
              </Col>
              <Col :span="3">
                <FormItem :label-width="0">
                  <Button type="primary" @click="formQuery" style="margin-left: 20px;">查询</Button>
                  <Button style="margin-left: 8px" @click="formReset">重置</Button>
                </FormItem>
              </Col>
            </Row>
          </Form>
        <!-- </div>
      </query> -->
      <dark-table
        :tableColumns="tableColumns"
        :tableData="tableData"
        :paginateTotal="paginateTotal"
        :highlight-row="true"
        :isloading="isloading"
        isHideExport
        :tableHeight="tableHeight"
        @onlySelectedRow="onlySelectedRow"
        @doubleSelectRow="doubleSelectRow"
        v-model="tablePageData"
      ></dark-table>
    </Modal>
    <Modal
      title="客户详情信息"
      v-model="userDetail.show"
      width="1000px"
      scrollable
      class-name="darkDialog user-detailDialog"
      :z-index="3000" style="min-width: 1000px;max-width: 1200px;">
    >
      <Form inline>
        <Row>
          <Col span="8">
            <FormItem label="客户编号" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.custNo | noneData" disabled></Input>
            </FormItem>
            <FormItem label="行业分类" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.tradeName | noneData" disabled></Input>
            </FormItem>
            <FormItem label="行政区域" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.areaName | noneData" disabled></Input>
            </FormItem>
            <FormItem label="资产属性" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.assetAttributeName | noneData" disabled></Input>
            </FormItem>
            <FormItem label="联系人姓名" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.cContanctsList[0].name | noneData" disabled></Input>
            </FormItem>
            <FormItem label="手机号码" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.cContanctsList[0].phoneNumber | noneData" disabled></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="客户名称" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.custName | noneData" disabled></Input>
            </FormItem>
            <FormItem label="电压等级" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.voltageGradeName | noneData" disabled></Input>
            </FormItem>
            <FormItem label="详细地址" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.address | noneData" disabled></Input>
            </FormItem>
            <FormItem label="注册资金" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.registeredCapital | noneData" disabled></Input>
            </FormItem>
            <FormItem label="职务" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.cContanctsList[0].post | noneData" disabled></Input>
            </FormItem>
            <FormItem label="电子邮箱" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.cContanctsList[0].email | noneData" disabled></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="客户类型" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.customerTypeName | noneData" disabled></Input>
            </FormItem>
            <FormItem label="年生产总值" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.gdp | noneData" disabled></Input>
            </FormItem>
            <FormItem label="所在部门" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.cContanctsList[0].department | noneData" disabled></Input>
            </FormItem>
            <FormItem label="办公电话" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.cContanctsList[0].tel | noneData" disabled></Input>
            </FormItem>
            <FormItem label="联系地址" :labelWidth="160" style="margin-bottom:20px">
              <Input :value="userDetail.cContanctsList[0].contactAddress | noneData" disabled></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { pageListCCBaseInfo,getCBasicInfoByCustId } from "@/api/operation"
export default {
  components: {},
  props: {
    pickerUser: {
      type: Object,
      default: {
        show: false,
        id: ""
      }
    }
  },
  data() {
    return {
      isloading: true,
      selectData: null, //选择的数据
      userDetail: {
        show: false,
        cContanctsList:[{}]
      },
      userDetailQuery: {},
      tablePageData: {
        pageNum: 1,
        pageSize: 20
      },
      tableHeight: 404,
      paginateTotal: 0, //全部页面数据总条数
      tableColumns: [
        {
          type: "index",
          title: "序号",
          width: "80",
          align: "center"
        },
        {
          title: "客户编号",
          key: "custNo",
          tooltip: true,
          align: "center",
        },
        {
          title: "客户名称",
          key: "custName",
          align: "center",
          tooltip: true
        },
        {
          title: "客户类型",
          width: 100,
          key: "customerTypeName",
          align: "center",
          tooltip: true
        },
        {
          title: "联系电话",
          key: "phoneNumber",
          align: "center",
          tooltip: true
        },
        {
          title: "地址",
          key: "contactAddress",
          align: "center",
          tooltip: true
        },
        {
          title: "操作",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  class: "dark-table-setBtn",
                  on: {
                    click: (a, b) => {
                      this.userDetail = {cContanctsList:[{}]};
                      this.$set(this.userDetail, 'show', true);
                      this.lookOver(params.row.custId);
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        }
      ],
      tableData: [
      ],
    };
  },
  computed: {},
  watch: {
    userDetail(val){
    },
    tablePageData:{
      handler(val){
        this.formQuery()
      },
       deep: true
    },
    pickerUser: {
      handler(val){
        console.log(val,"valll")
      }
    },
    deep: true

  },
  methods: {
    //查询
    formQuery() {
      this.isloading = true
      pageListCCBaseInfo({
          ...this.tablePageData,
          ...this.userDetailQuery
        }).then(res => {
        if (res.code == 200) {
          this.paginateTotal = res.result.totalNum;
          this.tableData = res.result.items;
        }else{
          this.$Message.error(res.message)
        }
        this.isloading = false
      });

    },
    //重置 tableQueryForm
    formReset() {
      Object.keys(this.userDetailQuery).forEach(item => {
        this.userDetailQuery[item] = "";
      });
      this.tablePageData = {
        pageNum: 1,
        pageSize: 20
      }

    },
    //查看
    lookOver(arg){
      getCBasicInfoByCustId({
          custId: arg
        }).then(res=>{
          if (res.code == 200) {
            res.result.show = true
          this.userDetail = res.result
          console.log(this.userDetail,"this.userDetail")
        } else {
          this.$Message.warning(res.message);
        }
      })
    },
    cancel(){},
    onlySelectedRow(arg) {
      this.selectData = arg;
    },
    doubleSelectRow(arg){
      this.selectData = arg;
      this.$emit("confirm", arg);
    },
    ok() {
      this.$emit("confirm", this.selectData);
    }
  },
  created() {

    pageListCCBaseInfo(this.tablePageData).then(res => {
      if (res.code == 200) {
        this.paginateTotal = res.result.totalNum;
        this.tableData = res.result.items;
      }
      this.isloading = false
    });
  },
  filters:{
    noneData:(val)=>{
      if(val){
        return val;
      }else {
        return "无"
      }
    }
  },
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.picker-user {
}
/deep/div.picker-userDialog {
  // z-index: 2000 !important;
}
/deep/div.user-detailDialog {
  // z-index: 3000 !important;
}
</style>
